<template>
	<view
		class="c-line-progress"
		:style="{
			height: height + 'rpx',
			background: inactiveColor,
			borderRadius: radius + 'rpx'
		}"
	>
		<view
			class="current"
			:style="{
				width: percent + '%',
				background: activeColor
			}"
		></view>
	</view>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({
	percent: {
		type: [Number, String],
		default: 10
	},
	radius: {
		type: [String, Number],
		default: 100
	},
	height: {
		type: [Number, String],
		default: 20
	},
	inactiveColor: {
		type: String,
		default: '#e3e7f0'
	},
	activeColor: {
		type: String,
		default: '#3875ea'
	}
});
</script>

<style lang="scss">
.c-line-progress {
	overflow: hidden;
	position: relative;
	width: 100%;
	.current {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
	}
}
</style>
